import * as React from "react";
import { ScrollView, View, Text, StyleSheet, Platform } from "react-native";
import { Button } from "react-native-elements";
import Loading from "./View/Loading";

import DateTimePicker from "./View/DateTimePicker";
import MyPicker from "./View/MyPicker";
import { Languages } from "./Service/MockData";

interface Props extends React.Props<any> {
  navigation: any;
}

interface State {
  isPickerVisible: boolean;
  pickerValue: string;
  isDateTimePickerVisible: boolean;
  datePickerValue: string;
  isSpinnerVisible: boolean;
}

export default class SettingDetail extends React.Component<Props, State> {
  static navigationOptions: any = {
    title: "设置详情"
  };

  _picker: any; // 获取picker引用
  _datePicker: any; // 获取datePicker引用

  constructor(props: Props) {
    super(props);
    this.state = {
      pickerValue: "",
      datePickerValue: "",
      isDateTimePickerVisible: false,
      isPickerVisible: false,
      isSpinnerVisible: false
    };
  }

  render() {
    let pickerText =
      this.state.pickerValue.length > 0 ? (
        <Text style={styles.textStyle}>{this.state.pickerValue}</Text>
      ) : null;

    let datePickerText =
      this.state.datePickerValue.length > 0 ? (
        <Text style={styles.textStyle}>{this.state.datePickerValue}</Text>
      ) : null;

    return (
      <View>
        <ScrollView>
          <Loading isSpinnerVisible={this.state.isSpinnerVisible} />
          {pickerText}
          <Button
            title={"Show Picker"}
            onPressIn={this._showPicker}
            containerStyle={styles.btnContainerStyle}
            buttonStyle={styles.btnStyle}
          />
          {datePickerText}
          <Button
            title={"Show Date Picker"}
            onPressIn={this._showDatePicker}
            containerStyle={styles.btnContainerStyle}
            buttonStyle={styles.btnStyle}
          />
          <Button
            title={"Show Loading"}
            containerStyle={styles.btnContainerStyle}
            buttonStyle={styles.btnStyle}
            onPressIn={() => {
              this.setState({ isSpinnerVisible: true });
              setTimeout(() => {
                this.setState({ isSpinnerVisible: false });
              }, 3000);
            }}
          />
          <Button
            title={"Open WebView"}
            containerStyle={styles.btnContainerStyle}
            buttonStyle={styles.btnStyle}
            onPressIn={() => {
              this.props.navigation.navigate("MyWebView", {
                url: "https://www.baidu.com"
              });
            }}
          />
        </ScrollView>
        <DateTimePicker
          ref={(ref: any) => (this._datePicker = ref)}
          isDateTimePickerVisible={this.state.isDateTimePickerVisible}
          onCancel={this._hideDatePicker}
          onConfirm={(dateStr: string) => {
            this.setState({
              datePickerValue: dateStr,
              isDateTimePickerVisible: false
            });
          }}
          dateTimeCurrentValue={this.state.datePickerValue}
        />
        <MyPicker
          ref={(ref: any) => {
            this._picker = ref;
          }}
          isPickerVisible={this.state.isPickerVisible}
          data={Languages}
          currentPickerValue={this.state.pickerValue}
          onConfirm={(pickerValue: string) => {
            this.setState({ pickerValue: pickerValue, isPickerVisible: false });
          }}
          onCancel={() => {
            this.setState({ isPickerVisible: false });
          }}
        />
      </View>
    );
  }

  _showPicker = () => {
    if (Platform.OS === "ios") {
      this.setState({ isPickerVisible: true });
      this._picker._showPicker();
    } else {
      this.setState({ isPickerVisible: true });
      setTimeout(() => {
        this._picker._showPicker();
      }, 20);
    }
  };

  _showDatePicker = () => {
    if (Platform.OS === "ios") {
      this.setState({ isDateTimePickerVisible: true });
    } else {
      this._datePicker.showDatePicker();
    }
  };

  _hideDatePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };
}

const styles = StyleSheet.create({
  textStyle: {
    textAlign: "center",
    marginTop: 20,
    fontSize: 16
  },
  btnContainerStyle: {
    marginLeft: 12,
    marginRight: 12,
    marginTop: 20
  },
  btnStyle: {
    borderRadius: 4,
    backgroundColor: "tomato"
  }
});
